<template>
    <el-main v-loading="loading">
		<div class="actionform">
			<div class="infos">
				<p>快递单号：{{query.LogisticCode}}</p>
				<p>承运公司：{{getNames(query.ShipperCode)}}</p>
			</div>
			<el-timeline>
				<el-timeline-item
					v-for="(activity, index) in traces"
					:key="index"
					:color="activity.color"
					:timestamp="activity.AcceptTime">{{activity.AcceptStation}}</el-timeline-item>
			</el-timeline>
			<div v-if="traces.length === 0">
				<span>暂未查到物流信息，请确认物流公司和订单号！</span>
			</div>
		</div>
    </el-main>
</template>

<script>
    import {
		ordersMaterialFlow,
    } from "@/api/table";

    export default {
        name: "LOGISTICS",
        components: {},
        props: {
			orderUid: [Number, String],
			CourierCompany: {
				type: Array,
				default() {
					return []
				}
			}
		},
        data() {
            return {
				traces: [],
				query: {},
				loading: true
            }
		},
		created() {
			this.getData();
			this.getNames()
		},
      	methods: {
			// 获取物流公司
			getNames(channelCode) {
				const obj = this.CourierCompany.find(item => item.channelCode === channelCode) || {}
				return obj.channelName
			},
			// 获取物流信息
			getData() {
				ordersMaterialFlow({
					orderUid: this.orderUid 
				}).then(res => {
					if (res.data.isSuccessful !== "Y") {
						this.$message.error(res.data.message);
						return
					}
					if (res.data.data.length) {
						this.query = JSON.parse(this.$util.decode(res.data.data[0].trackingData));
						this.traces = this.query.Traces.reverse();
						this.traces.map((item, index) => {
							if (!index) {
								item.color = '#0bbd87'
							}
							return item
						});
					}
				}).finally(() => {
					this.loading = false
				});
			},
      	},
  	}
</script>
<style lang="scss" scoped>
	.actionform {
		height: 750px;
	}
	.infos {
		padding: 0 30px 30px;
		>p {
			font-size: 14px;
			line-height: 1.5;
		}
	}
</style>

